<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hotel Management System</title>

<link rel="stylesheet" href="css/grid/960_12_col.css" />
<link rel="stylesheet" href="css/grid/960.css" />
<link rel="stylesheet" href="css/grid/reset.css" />
<link rel="stylesheet" href="css/mystyle.css" />


<link type="text/css" href="css/flick/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	

		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

		<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>

	<script type="text/javascript" src="js/jquery.tools.min.js"></script>

<script type="text/javascript">

			$(function(){

				$("#myform").validator();
				
				// Datepicker

				$('#datepicker').datepicker({

					inline: true

				});
				
				$('#datepicker').change(function() {
					  var a = $('#datepicker').datepicker( "getDate" );
					  
					  alert(a);
					});


			});

		</script>

</head>


<body>
<div id="container" class="container_12">

<div id="header" class="grid_12">
<h1>This is Header</h1>
</div>

<div id="sidebar" class="grid_3">

<div id="datepicker">

</div><!-- end date -->

<div id="sideform">
<form id="myform">

   <fieldset>
       <p>
         <label>name *</label>
         <input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" />
      </p>
      
      <p>
         <label>Booking Number *</label>
         <input type="url" name="url" required="required" />
      </p>
     
    
      
      <button type="submit">Submit form</button>
      <button type="reset">Reset</button>
   </fieldset>

</form>
</div><!--  end sideform -->

</div><!--  end sidebar -->

<div id="content" class="grid_9 alpha">

<?php
for($i=2;$i<=54;$i++)
{
?>
<div id="room<?=$i?>" class="grid_1 omega room">
room&nbsp;<?=$i?>
</div><!-- end rooms -->
<?php
}
?>
<div id="room1" class="grid_3 omega room">
room&nbsp;<?=$i?>
</div><!-- end rooms -->

<div id="info" class="grid_9 alpha">

	<div id="info1" class="grid_2 omega">
	vacant : 1
	</div>
	
	<div id="info2" class="grid_2 omega">
	occupied : 1
	</div>
	
	
	<div id="info4" class="grid_2 omega">
	reserved: 1
	</div>
	
	<div id="info5" class="grid_2 omega">
	suspense: 1
	</div>
	
	<div id="info6" class="grid_1 omega">
	dirty: 1
	</div>

</div><!-- end info -->

</div><!--  end content -->

<div id="footer" class="grid_12">
this is footer
</div>

</div>

</body>
</html>